<template>
  <van-nav-bar
    left-arrow
    @click-left="onClickLeft"
    title="收藏"
    :border="false"
  />
  <van-tabs v-model:active="active">
    <van-tab title="商品">
      <div v-show="isCol1">
        <div class="main_one">
          <div
            style="
              column-count: 2;
              -moz-column-count: 2;
              -webkit-column-count: 2;
            "
          >
            <div class="ones" v-for="(value, index) in tuwen_list">
              <img style="width: 100%" :src="value.path" />
              <div
                style="
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                <span>
                  {{ value.title }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <van-empty v-show="!isCol1" description="空空如也..." />
    </van-tab>
    <van-tab title="店铺">
      <div v-show="!isCol2">
        <div class="allShop">123</div>
      </div>
      <van-empty v-show="isCol2" description="空空如也..." />
    </van-tab>
    <van-tab title="手工圈">
      <div class="allHang">
        <div class="hang" v-show="isCol3" data-v-7043623d="">
          <div class="one" data-v-7043623d="">
            <div class="zuo" data-v-7043623d="">
              <img
                src="http://127.0.0.1:5173/src/components/cby/photo/2.jpg"
                alt=""
                data-v-7043623d=""
                style="height: 35px; width: 35px; border-radius: 50%"
              />
            </div>
            <div class="you" data-v-7043623d="">
              <div class="y_s" data-v-7043623d="">花花</div>
              <div class="y_x" data-v-7043623d="">
                <div class="y_x_z" data-v-7043623d="">2小时前</div>
                <div class="y_x_y" data-v-7043623d="">来自绘画</div>
              </div>
            </div>
          </div>
          <div class="two" data-v-7043623d="">宝玉宝玉宝玉宝玉</div>
          <div class="three" data-v-7043623d="">
            <div data-v-7043623d="">
              <img
                src="http://127.0.0.1:5173/src/components/cby/photo/1.jpg"
                alt=""
                data-v-7043623d=""
              />
            </div>
            <div data-v-7043623d="">
              <img
                src="http://127.0.0.1:5173/src/components/cby/photo/2.jpg"
                alt=""
                data-v-7043623d=""
              />
            </div>
            <div data-v-7043623d="">
              <img
                src="http://127.0.0.1:5173/src/components/cby/photo/3.jpg"
                alt=""
                data-v-7043623d=""
              />
            </div>
            <div data-v-7043623d="">
              <img
                src="http://127.0.0.1:5173/src/components/cby/photo/4.jpg"
                alt=""
                data-v-7043623d=""
              />
            </div>
            <div data-v-7043623d="">
              <img
                src="http://127.0.0.1:5173/src/components/cby/photo/1.jpg"
                alt=""
                data-v-7043623d=""
              />
            </div>
            <div data-v-7043623d="">
              <img
                src="http://127.0.0.1:5173/src/components/cby/photo/2.jpg"
                alt=""
                data-v-7043623d=""
              />
            </div>
            <div data-v-7043623d="">
              <img
                src="http://127.0.0.1:5173/src/components/cby/photo/3.jpg"
                alt=""
                data-v-7043623d=""
              />
            </div>
          </div>
        </div>
      </div>
      <van-empty v-show="!isCol3" description="空空如也..." />
    </van-tab>
    <van-tab title="教程">
      <div class="storeUp" v-show="isCol4">
        <div class="colItem">
          <div
            class="colItem1"
            :class="isShow == 1 ? 'active' : ''"
            @click="btnClick(1)"
          >
            <span>全部</span>
          </div>
          <div
            class="colItem2"
            :class="isShow == 2 ? 'active' : ''"
            @click="btnClick(2)"
          >
            <span>旧物改造</span>
          </div>
        </div>
        <div class="course">
           <div class="main_one">
          <div
            style="
              column-count: 2;
              -moz-column-count: 2;
              -webkit-column-count: 2;
            "
          >
            <div class="ones" v-for="(value, index) in tuwen_list">
              <img style="width: 100%" :src="value.path" />
              <div
                style="
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                <span>
                  {{ value.title }}
                </span>
              </div>
            </div>
          </div>
        </div>
        </div>
      </div>
      <van-empty v-show="!isCol4" description="空空如也..." />
    </van-tab>
  </van-tabs>
</template>
  <script setup lang="ts">
import { onMounted, ref, reactive, toRaw } from "vue";
import { useRouter, useRoute } from "vue-router";
const route = useRoute();
const router = useRouter();
let active: any = ref(0);
const isCol1 = ref(true);
const isCol2 = ref(true);
const isCol3 = ref(true);
const isCol4 = ref(true);
let all_tittle = reactive([])
var tuwen_list = reactive([
  {
    path: new URL(`../components/lgh/myimg/01.png`, import.meta.url).href,
    title: "这是第一个测试",
  },
  {
    path: new URL(`../components/lgh/myimg/02.png`, import.meta.url).href,
    title: "这是第二个测试",
  },
  {
    path: new URL(`../components/lgh/myimg/02.png`, import.meta.url).href,
    title: "这是第二个测试",
  },
  {
    path: new URL(`../components/lgh/myimg/01.png`, import.meta.url).href,
    title: "这是第一个测试",
  },
]);

function onClickLeft() {
  router.push({
    name: "my",
  });
}
onMounted(() => {
  let aa: any = route.query.myindex;
  active.value = aa - 0;
});
const isShow = ref(1);
function btnClick(index: any) {
  isShow.value = index;
}
</script>
  <style scoped>
.hang {
  padding: 10px;
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  background-color: white;
}

.one,
.two,
.three {
  margin: 5px 0px 5px 0px;
}

.three > div {
  width: 29vw;
  height: 100px;
  /* border: 1px solid black; */
  display: inline-block;
  margin: 0px 3px 3px 3px;
}

img {
  width: 29vw;
  height: 100px;
  display: inline-block;
  margin: 0px 3px 3px 3px;
}

.one {
  display: flex;
}

.zuo {
  height: 35px;
  width: 35px;
  border-radius: 50%;
}

.you {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}

.y_s {
  flex: 1;
  font-size: 15px;
}

.y_x {
  flex: 1;
  display: flex;
  font-size: 10px;
}

.y_x_z {
  color: #a4a4a4;
}

.y_x_y {
  margin-left: 10px;
  color: #a4a4a4;
}

.two {
  font-size: 15px;
  padding-left: 5px;
}

.storeUp {
  /* width: 100%; */
  height: 100vh;
  /* background-color: rgba(0, 0, 0, 0.047); */
}
.colItem {
  height: 40px;
  background-color: white;
  display: flex;
  align-items: center;
  /* text-align: center; */
}
.colItem1,
.colItem2 {
  margin-left: 10px;
  font-size: 12px;
}
.active {
  padding: 5px;
  border-radius: 12px;
  background-color: rgba(233, 163, 174, 0.23);
  color: red;
}
.ones {
  border: 1px solid red;
  /* padding: 10px; */
  background-color: white;
}
.main_one {
  margin-top: 1%;
  margin-bottom: 1%;
  margin-left: 4%;
  width: 92vw;
}
</style>
  <style>
.van-icon-arrow-left:before {
  color: gray;
}
</style>
